<template>
	<view class="content">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight">
				<template #titleBox>
					<view class="inputLay">
						<uni-easyinput trim="all" :styles="styles" :placeholderStyle="placeholderStyle"
							primaryColor="#FF9BA7" placeholder="搜索店铺或机台关键词" v-model="value1" prefixIcon="search">

						</uni-easyinput>
					</view>
				</template>
			</headNav>
		</view>
		<view class="searchWrap">
			<view class="title">
				历史搜索
			</view>
			<view class="searchLay">
				<view class="searchItem" v-for="(item,index) in Data">
					<view class="txt">{{item.txt}}</view>
					<uni-icons class="closeempty" type="closeempty" color="#979797" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view class="pictureLay">
			<view class="title">
				热门搜索
			</view>
			<view class="pictureItem" v-for="(item,index) in 6">
				<cardListItem :cardWidth='92' :cardHeight='92'>
					<template #priceTip>
						<view class="tagLay">
							<view class="tagItem tagBg1">
								56人收藏
							</view>
							<view class="tagItem tagBg2">
								火影联动
							</view>
							<view class="tagItem tagBg3">
								34人在抽
							</view>
						</view>
					</template>
				</cardListItem>
				<view class="Ranking">
					{{index+1}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Data: [{
					txt: '收到妨功害能',
				}, {
					txt: '都给我',
				}, {
					txt: '多规格',
				}, {
					txt: '4大范甘迪发',
				}],
				styles: {
					backgroundColor: " #F2F2F2",
					color: '#343434',
					borderColor: '#F2F2F2',
				},
				placeholderStyle: "color:#B6B6B6;font-size:21rpx",
				value1: ''
			};
		}
	}
</script>
<style>
</style>
<style lang="scss" scoped>
	.mainHeader {
		border: 2rpx solid #DDDDDD;
		background-color: #fff;

		::v-deep .inputLay {
			width: 434upx;
			// margin: 0 auto 56upx;

			.is-input-border {
				border-radius: 30upx;
			}

			.uni-easyinput__content-input {
				height: 62upx;
			}
		}
	}

	.searchWrap {
		padding-top: 44upx;
		padding-left: 80upx;
		padding-right: 66upx;

		.title {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
			margin-bottom: 20upx;
		}

		.searchLay {
			@include flexLayout(center);
			flex-wrap: wrap;
			row-gap: 32upx;
			column-gap: 20rpx;

			.searchItem {
				@include flexLayout(center, space-between);
				min-width: 164rpx;
				height: 54rpx;
				background: #F2F2F2;
				border-radius: 28rpx;
				padding: 0 12upx 0 20upx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 22rpx;
				color: #828282;
				line-height: 1;

				.txt {
					padding-right: 26upx;
					white-space: nowrap;
				}

				.closeempty {
					line-height: 1;
				}
			}
		}
	}

	.pictureLay {
		width: 646upx;
		margin: 60upx auto;
		border-radius: 38rpx;
		padding: 20upx 26upx;
		position: relative;
		overflow: hidden;

		&:before {
			position: absolute;
			z-index: -1;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			height: 626rpx;
			background: linear-gradient(180deg, #FBDCE6 0%, rgba(255, 235, 235, 0) 100%);
		}

		.title {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
			margin-bottom: 50upx;
		}

		::v-deep .pictureItem {
			margin-bottom: 66upx;
			position: relative;
			padding-left: 12upx;
			position: relative;

			.Ranking {
				position: absolute;
				top: -4upx;
				left: 4upx;
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 24upx;
				background: #000000;
				font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
				font-weight: bold;
				font-size: 14rpx;
				color: #FFFFFF;
			}

			.itemBox {
				border-bottom: none;

				.priceTxt {
					display: none;
				}
			}

			.tagLay {
				margin-top: 16upx;
				@include flexLayout(center);
				flex-wrap: wrap;
				row-gap: 12upx;
				column-gap: 12rpx;

				.tagItem {
					min-width: 78rpx;
					height: 28rpx;
					line-height: 28upx;
					border-radius: 4rpx;
					padding: 0 12upx;
					font-size: 12rpx;
					text-align: center;
				}

				.tagBg1 {
					background: #FFDEED;
					color: #F36BA9;
				}

				.tagBg2 {
					background: #FFDABB;
					color: #FF7400;
				}

				.tagBg3 {
					background: #DDF9ED;
					color: #18D081;
				}
			}
		}
	}
</style>